<template>
  <div class="setBox">
      <div class="userSettings">
        <el-switch
          v-model="value1"
          active-text="按月付费"
        >
        </el-switch>
        <el-switch
          style="display: block"
          v-model="value2"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="按月付费"
          >
        </el-switch>
        <el-switch
          v-model="value3"
          active-text="按月付费"
        >
        </el-switch>
        <el-switch
          style="display: block"
          v-model="value4"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="按月付费"
          >
        </el-switch>
        <el-switch
          v-model="value5"
          active-text="按月付费"
        >
        </el-switch>
        <el-switch
          style="display: block"
          v-model="value6"
          active-color="#13ce66"
          inactive-color="grey"
          active-text="按月付费"
          >
        </el-switch>
      </div>
      <div class="btn-outer">
        <el-button size="mini" type="danger" @click="quit">退出登录</el-button>
      </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  data(){
    return {
      value1: true,
      value2: true,
      value3: true,
      value4: true,
      value5: true,
      value6: false,
    }
  },
  methods:{
    ...mapMutations("manage",["setFlag"]),
    logout(){
        this.setFlag(false)
        let tempLocal = {"flag":false}
        localStorage.setItem('user',JSON.stringify(tempLocal))
        this.$message({
          type: 'success',
          message: '注销成功'
        });  
    },
    quit(){
       this.$confirm('确认退出?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.logout()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    }
  }
}
</script>

<style>
.setBox{
  box-sizing: border-box;
  padding: 30px;
  position: relative;
  border: 1px solid #e4e7ed;
}
.userSettings{
    height: 450px;
    text-align: left;
}
.btn-outer{
  text-align: right;
  padding-right: 50px;
}
.userSettings .el-switch{
  margin: 20px 50px;
}
</style>